import './Topic.less';
import ok from '../images/ok.png'
import add from '../images/add.png'

function Topic(props) {
    return (
        <div className="Topic">
            <div className="topic-top">
                <img src={props.icon} />
                {props.name}
                { props.size<768 ? <div className={`has-follow ${props.hasFollow ? 'unfollow-button' : 'follow-button'}`}>{props.hasFollow ? '已关注': '关注'}</div> :  <img className="has-follow" src={props.hasFollow ? ok : add} />}</div>
            <div className="topic-bottom">{props.introduce}</div>
        </div>
    );
}

export default Topic;